<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>学子商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.8.3.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/webindex.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<script src="../js/menu.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--导航结束-->
		<div class="container">
			<div class="col-md-2" id="indexMenu">
				<ul class="index-menu">
				</ul>
				<div id="showIndex">
					<ul class="second-menu">
						<li class="second-menu-li">####</li>
					</ul>
				</div>
				<div id="showSecond">
					<ul class="third-menu">
					</ul>
				</div>
			</div>
			<div class="col-md-10">
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
						<li data-target="#myCarousel" data-slide-to="3"></li>
						<li data-target="#myCarousel" data-slide-to="4"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner" align="center">
						<div class="item active">
							<img src="../images/index/index_banner1.png">
						</div>
						<div class="item">
							<img src="../images/index/index_banner2.png">
						</div>
						<div class="item">
							<img src="../images/index/index_banner3.png">
						</div>
						<div class="item">
							<img src="../images/index/index_banner4.png">
						</div>
						<div class="item">
							<img src="../images/index/index_banner5.png">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
			<!--推荐栏目-->
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<p class="panel-title">猜你喜欢</p>
					</div>
					<div id="favourite" class="panel-body panel-item">
						<div class="col-md-12" v-for="prod in favourites">
							<div class="col-md-7 text-row-2"><a :href="`product.html?id=`+prod.id">{{prod.title}}</a></div>
							<div class="col-md-2">¥{{prod.price}}</div>
							<div class="col-md-3"><img :src="`..`+prod.image+`collect.png`" class="img-responsive" /></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						<p class="panel-title">热销排行</p>
					</div>
					<div id="hot" class="panel-body panel-item">
						<div class="col-md-12" v-for="prod in hots">
							<div class="col-md-7 text-row-2"><a :href="`product.html?id=`+prod.id">{{prod.title}}</a></div>
							<div class="col-md-2">¥{{prod.price}}</div>
							<div class="col-md-3"><img :src="`..`+prod.image+`collect.png`" class="img-responsive" /></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../js/vue.js"></script>
	<!--页脚结束-->
	<script type="text/javascript">
		var hotListUrl="../products/hot";
		var favouriteUrl="../products/favourite";

		var hotObj=new Vue({
			el: '#hot',
			data: {
				hots: []
			}
		});

		var favouriteObj=new Vue({
			el: '#favourite',
			data: {
				favourites: []
			}
		});

		$(function () {
			getHeader();
			getFooter();
			listHot();
			listFavourite();
		});

		function getHeader(){
			var url="topTemplate.html";
			$.get(url,function(result){
				$("body").prepend(result);
			});
		}
		function getFooter(){
			var url="footerTemplate.html";
			$.get(url,function(result){
				$("body").append(result);
			});
		}

		function listHot(){
			$.get(hotListUrl,function(result){
				if(result.code==1000){
					hotObj.hots=result.data;
				}else{
					alert(result.msg);
				}
			});
		}

		function listFavourite(){
			$.get(favouriteUrl,function(result){
				if(result.code==1000){
					favouriteObj.favourites=result.data;
				}else{
					alert(result.msg);
				}
			});
		}
	</script>
</html>